<template>
    <div>
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>审批中心</span> /
            <span class="active">工作台</span>
        </div>
        <el-radio-group v-model="tabPosition" class="mb-20">
            <el-radio-button v-for="(item, index) in tabList" :key="index" :label="index">{{ item }}</el-radio-button>
        </el-radio-group>
        <div class="flex center mb-15">
            <div class="showData">
                <div v-for="(item, index) in showData" :key="index" class="flex center">
                    <div class="text-center" :style="{ color: item.color }">
                        <div class="iconfont" v-html="item.icon"></div>
                        <div>{{ item.name }}</div>
                    </div>
                    <div class="fs-20 fw-b ml-20" style="color: #61dcef;">{{ item.data }}</div>
                </div>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="单位名称" align="center">
            </el-table-column>
            <el-table-column prop="type" label="审批类型" align="center">
            </el-table-column>
            <el-table-column prop="content" label="内容" align="center">
            </el-table-column>
            <el-table-column prop="date" label="提交时间" align="center">
            </el-table-column>
            <el-table-column label="处置状态" align="center">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.state <= 2 ? '#def91b' : scope.row.state <= 4 ? '#28e8d8' : '#fb6c6c' }">
                        {{ state.get(scope.row.state) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleDelete(scope.$index, scope.row)">查看</el-button>
                    <el-button size="small" @click="handleDelete(scope.$index, scope.row)"
                        style="background: #23b5a9;color:#fff">同意</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">拒绝</el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            tabPosition: 0,
            tabList: ['全部', '工作通知', '安全通报', '动火作业', '隐患排查', '其它'],
            showData: [{
                name: "待处理",
                icon: '&#xe6ff;',
                data: 18,
                color: '#def91b'
            },
            {
                name: "已处理",
                icon: '&#xe67e;',
                data: 32,
                color: '#28e8d8'
            },
            {
                name: "已拒绝",
                icon: '&#xe7a0;',
                data: 8,
                color: '#fb6c6c'

            }],
            tableData: [{
                name: '山东某某建筑工程有限公司',
                type: '动火作业',
                content: '111',
                date: '2024-05-21',
                state: 1

            }, {
                name: '山东某某建筑工程有限公司',
                type: '动火作业',
                content: '111',
                date: '2024-05-21',
                state: 2
            }, {
                name: '山东某某建筑工程有限公司',
                type: '动火作业',
                content: '111',
                date: '2024-05-21',
                state: 3
            }, {
                name: '山东某某建筑工程有限公司',
                type: '动火作业',
                content: '111',
                date: '2024-05-21',
                state: 4
            }, {
                name: '山东某某建筑工程有限公司',
                type: '动火作业',
                content: '111',
                date: '2024-05-21',
                state: 5
            }
            ],
            state: new Map([
                [1, '未审批'],
                [2, '未读'],
                [3, '已读'],
                [4, '已审批'],
                [5, '已拒绝'],
            ]),
        }
    }
}
</script>

<style lang="less" scoped>
.showData {
    background: #1d61b7;
    padding: 10px 15px;
    display: flex;
    justify-content: space-around;
    width: 30%;
    border-radius: 5px;
}
.iconfont{
    font-size: 18px;
}
</style>